<template>
  <div class="index">
    <div class="grid">
      <button @click="getdata()">换一组</button>
      <div v-for="item in images" :key="item.url" class="grid-item">
        <img :src="item.url" alt="" >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const images = ref([]);
const getdata = async () => {
  images.value = []
  const imgsteam = ref({})
  for (let i = 1; i <= 12; i++) {
    axios.get('/API/tp/yhtp.php', {
      responseType: 'blob' // 必须说明 axios 请求类型
    }).then((res) => {
      console.log(res.data)
      imgsteam.value = {}
      imgsteam.value.url = window.URL.createObjectURL(res.data) // 后端返回前端渲染
      console.log(imgsteam.value)
      images.value.push(imgsteam.value)
    })
  }
}
// let page = 1
// const fetchImages = async (control) => {
//   console.log(control);
//   if (control === 'Next') {
//     page += 1
//   }
//   const res = await axios.get(`/API/tp/sjbz/sjbz.php?screen=&format=1&page=${page}&limit=12`)
//   images.value = res.data.data
//   console.log(images.value, 'res')
// }
onMounted(() => {
  // fetchImages()
  getdata()
});
</script>

<style scoped>
.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
  width: 80%;
}

.grid-item {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}
</style>
